<div id="role_manager">
    <div class="role_manager">
        <el-row class="table_search">
            <el-col :span="14">
                <template>
                    <el-input v-model="keywords"
                              id="roleSearch"
                              placeholder="角色编号/角色名称"
                              :clearable="true"
                              prefix-icon="el-icon-search"
                              style="font-size: 12px">
                    </el-input>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
            <el-col :span="10" class="text-r">
                <el-button type="primary" icon="el-icon-plus" @click="edit()">新增角色</el-button>
            </el-col>
        </el-row>

        <template>
            <el-table
                    size="mini"
                    @row-click='handleRowHandle'
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="roleId"
                        label="角色序号"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="roleName"
                        label="角色名称"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="450"
                        prop="adDesc"
                        label="描述">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block footerBox" id="fenyeBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>

    </div>
    <div class="isShowingBox" v-show="isShowingBox"></div>
    <el-dialog :title="dialogTitle" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogFormVisible">
        <span class="delDialogBtn" @click="closeAddDialog">x</span>
        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="200px">
            <el-form-item label="角色名称：" prop="roleName">
                <!--<el-input v-model="form.roleName" style="font-size: 12px"></el-input>-->
                <input type="text" v-model="form.roleName" required lay-verify="required" style="width: 50%" autocomplete="off" class="layui-input">
            </el-form-item>
            <el-form-item label="角色描述：" prop="descb">
                <el-input type="textarea" v-model="form.descb"></el-input>
            </el-form-item>
            <el-form-item label="关联菜单：" prop="menus">
                <el-input type="text" v-model="form.menus" v-show="false"></el-input>
                <el-tree
                        :data="form.menuList"
                        show-checkbox
                        node-key="menuId"
                        :props="defaultProps"
                        @check-change="menuTreeChange"
                        ref="menuTree">
                </el-tree>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="clearlNotice('form')">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="角色详情" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogInfoVisible" class="dialogDetails">
        <span class="delDialogBtn" @click="dialogInfoVisible = false;isShowingBox=false">x</span>
        <div class="info-template-content">
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">角色ID</el-col>
                <el-col :span="15" style="color: #333">{{bean.roleId}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">角色名称</el-col>
                <el-col :span="15" style="color: #333">{{bean.roleName}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">角色描述</el-col>
                <el-col :span="15" style="color: #333">{{bean.descb}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">创建人</el-col>
                <el-col :span="15" style="color: #333">{{bean.creator}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">创建时间</el-col>
                <el-col :span="15" style="color: #333">{{bean.createDate}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">更新人</el-col>
                <el-col :span="15" style="color: #333">{{bean.updator}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="3" style="color: #666">更新时间</el-col>
                <el-col :span="15" style="color: #333">{{bean.updateDate}}</el-col>
            </el-row>
        </div>
    </el-dialog>
</div>

<script>
    $(function () {
        placeHolde("#roleSearch","角色编号或者角色名称");
    });

    var layer,
        loadRole;
    layui.use('layer', function(){
        layer = layui.layer;
        loadRole  = layer.load(1, {shade: [0.5, '#000']});

    });

    var roleManager = new Vue({
        el: "#role_manager",
        data: {
            isShowingBox:false,
            showDelBtn:false,

            ismodalClose:false,
            isEsc:false,

            dialogFormVisible: false,
            dialogTitle: '',
            dialogInfoVisible: false,//查看详情
            bean: {},//查看详情
            form: {
                roleId:'',
                roleName: '',
                descb: '',
                menuList: [],
                menus:''
            },
            rules: {
                roleName: [
                    {required: true, message: '请填写角色名称', trigger: 'blur'},
                    { max: 200, message: '长度在 200 个字符以内', trigger: 'blur' }
                ],
                descb: [
                    { max: 200, message: '长度在 200 个字符以内', trigger: 'blur' }
                ],
                menus: [
                    {required: true, message: '请选择角色权限', trigger: 'change'}
                ]
            },
            defaultProps: {
                children: 'sysMenus',
                label: 'menuName'
            },
            keywords: '',
            tableData: [],
            totalCount: '',
            totalPage: '',
            currentPage: 1,
            pageSize: 10
        },
        methods: {
            clearlNotice:function(f) {
                this.backHome();
                this.$refs[f].clearValidate();
            },
            backHome:function () {
                this.closeAddDialog();
                this.isShowingBox = false;
                this.dialogFormVisible = false;
                this.dialogInfoVisible = false;
            },
            /**
             * 点击X关闭模态框
             * */
            closeAddDialog:function () {
                var form = this.$refs.form;
                form.clearValidate();
                this.isShowingBox = false;
                this.dialogFormVisible = false;
                this.dialogInfoVisible = false;
            },
            submitForm: function (formName) {
                var that = this;
                this.$refs[formName].validate(
                   function (valid) {
                       if (valid) {
                           var url = "${basePath}bank/role/save";
                           var option = {
                               'roleId':roleManager.form.roleId,
                               'roleName': roleManager.form.roleName,
                               'descb': roleManager.form.descb,
                               'menus': roleManager.form.menus
                           };
                           sendService(url, option, function (resData) {
                               if (resData.status == 'success') {
                                   that.isShowingBox = false;
                                   roleManager.goPage("/bank/role");
                                   //roleManager.$message.success(resData.msg);
                                   layer.msg(resData.msg, {icon: 6});
                               } else {
                                   layer.msg(resData.msg, {icon: 5});
                                   //roleManager.$message.error(resData.msg);
                               }
                           });
                       } else {
                           layer.msg("表单验证失败，请检查", {icon: 5});
                           //roleManager.$message.error("表单验证失败，请检查");
                           return false;
                       }
                   }
               );
            },
            handleCurrentChange: function (currentPage) {
                roleManager.currentPage = currentPage;
                roleManager.searchFun();
            },
            searchFun: function () {
                var options = {
                    'currentPage': roleManager.currentPage,
                    'keywords': roleManager.keywords
                };
                var url = '${basePath}bank/role/getRolelist';
                sendService(url, options, function (resData) {
                    if (resData.status == 'success') {
                        roleManager.tableData = resData.t;
                        roleManager.totalPage = resData.page.totalPage;
                        roleManager.totalCount = resData.page.totalResult;
                        fenYeProblem(resData.page.totalPage);
                    }
                });
            },
            edit: function (index, row) {
                var that = this;
                if (index != undefined) {
                    that.isShowingBox = true;
                    var url = "${basePath}bank/role/editQuery";
                    var options = {
                        'roleId': row.roleId,
                    };
                    roleManager.dialogFormVisible = true;
                    roleManager.$nextTick(function () { //必须加上这个钩子，要不获得不了TREE，因为TREE没被渲染
                        sendService(url, options, function (resData) {
                            if (resData.status == 'success') {
                                if (resData.t.adId != '') {
                                    roleManager.form.roleId = resData.t.roleId;
                                    roleManager.form.roleName = resData.t.roleName;
                                    roleManager.form.descb = resData.t.descb;
                                    roleManager.form.menus = resData.t.menus;
                                    var tree = roleManager.$refs.menuTree;
                                    if(resData.t.menus==null || resData.t.menus == '')
                                        tree.setCheckedKeys([]);
                                    else
                                        tree.setCheckedKeys(resData.t.menus.split(","), false);
                                }
                                roleManager.dialogTitle = "编辑角色";

                            } else {
                                layer.msg("操作失败！请联系管理员！", {icon: 5});
                               // roleManager.$message.error("操作失败！请联系管理员！");
                            }
                        });
                    });
                } else {
                    that.isShowingBox = true;
                    roleManager.form.roleId = "";
                    roleManager.form.roleName = "";
                    roleManager.form.descb = '';
                    roleManager.form.menus = '';
                    roleManager.dialogTitle = "新建角色";
                    roleManager.dialogFormVisible = true;
                    roleManager.$nextTick(function () {
                        roleManager.$refs.menuTree.setCheckedKeys([]);
                    });
                }
            },
            del: function(index, row) {
                var msg = confirm('此操作将永久删除该角色信息, 是否继续?');
                if(msg){
                    var url = "${basePath}bank/role/del";
                    var options = {
                        'roleId': row.roleId,
                    };
                    sendService(url, options, function (resData) {
                        if (resData.status == 'success') {
                            layer.msg(resData.msg);
                            //roleManager.$message.success(resData.msg);
                            roleManager.goPage("/bank/role")
                        } else {
                            layer.msg(resData.msg, {icon: 5});
                            //roleManager.$message.error(resData.msg);
                        }
                    });
                }
            },
            menuTreeChange: function(node,checked,childrenCheck){
                var  checkedKeys = roleManager.$refs.menuTree.getCheckedKeys(true);
                roleManager.form.menus = checkedKeys+"";
            },
            handleRowHandle: function (row,event,column) {
                if(column.label == '操作'){
                    return;
                }
                roleManager.isShowingBox = true;
                roleManager.dialogInfoVisible = true;
                roleManager.bean = row;
                if(roleManager.bean.createDate && roleManager.bean.createDate !='')
                    roleManager.bean.createDate = new Date(roleManager.bean.createDate).toLocaleDateString();
                if(roleManager.bean.updateDate && roleManager.bean.updateDate !='')
                    roleManager.bean.updateDate = new Date(roleManager.bean.updateDate).toLocaleDateString();
            },
            goPage: function (url) {
                $(".main-right").empty();
                $(".main-right").load('${basePath}' + url);
            }
        },
        created: function () {
            //取TABLE数据
            var url = '${basePath}bank/role/getRolelist';
            var options = {currentPage: 1};
            sendService(url, options, function (resData) {
                if (resData.status == 'success') {
                    roleManager.tableData = resData.t;
                    roleManager.totalPage = resData.page.totalPage;
                    roleManager.totalCount = resData.page.totalResult;
                    fenYeProblem(resData.page.totalPage);
                } else {
                    layer.msg(resData, {icon: 5});
                }
            });
        },
        beforeCreate:function(){
            sendService('${basePath}system/menu/getMenuByUrl', {}, function (resData) {
                if(resData.status == 'success'){
                    layer.close(loadRole);
                    roleManager.form.menuList = resData.t;
                }
            });
        }
    });
</script>

<style scoped>
    .el-table__header,.el-table__body{
        width: 100% !important;
    }
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    /*table按钮样式调整开始*/
    .el-button--mini, .el-button--mini.is-round{
        padding: 4px 10px;
    }
    .userManageBox .editBtn{
        color: #409EFF;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .editBtn:hover{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }

    .userManageBox .delBtn{
        color: #fa5555;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .delBtn:hover{
        color: #fff;
        background-color: #fa5555;
        border-color: #fa5555;
    }
    .userManageBox .resetBtn{
        color: #02dda7;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .resetBtn:hover{
        color: #fff;
        background-color: #02dda7;
        border-color: #02dda7;
    }
    .userManageBox .el-button{
        margin-left: 0;
    }
    /*table按钮样式调整结束*/
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    /*.el-table td, .el-table th.is-leaf{*/
    /*border: none;*/
    /*}*/
    .el-table::before{
        height: 0;
    }
    .addUserBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }

    .add-template-form > div{
        margin-left: 45px;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    #menuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }
    .edit-template-form > div{
        margin-left: 45px;
    }
    /*.edit_dialog .el-form-item.is-required .el-form-item__label:before{*/
    /*content: '';*/
    /*}*/
    #addMenuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }


    .dialogDetails .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .dialogDetails .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }

    .dialogDetails .info-template-content{
        background: #ffffff;
    }
    .dialogDetails .item-row{
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 100px;
    }
    .dialogDetails .item-row div:first-of-type{
        color: #aaa;
        text-align: left
    }
    .dialogDetails .item-row div:last-of-type{
        color: #333;
        padding-left: 80px
    }

    .dialogDetails .info-template-content .el-row:nth-child(even){
        background-color: #F8F9FB;
    }
    .dialogDetails .info-template-content .el-row:last-of-type{
        margin-bottom: 30px;
    }
    .dialogDetails .el-dialog{
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }


    .el-dialog__header{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #aaa;
        font-size: 22px;

    }
    .el-dialog__body{
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body{
        padding: 50px 0 0 0 ;
    }
    .errorBox{
        color: #fa5555;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .errorBox2333{
        color: #fa5555;
        font-size: 12px;
    }
    /*#selManage label{*/
    /*position: relative;*/
    /*}*/
    #selManage label:before{
        content: '*';
        color: #fa5555;
        margin-right: 4px;

    }


    /*详情页样式*/
    .el-textarea__inner{
        overflow: auto;
        width: 50%;
        height: 70px;
        font-size: 12px;

    }


</style>
